<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
<script src="chrome://browser/content/preferences/zen-settings.js"/>
<html:template id="template-paneZenLooks">
<hbox id="zenLooksCategory"
      class="subcategory"
      hidden="true"
      data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-looks-title"/>
</hbox>

<groupbox id="zenLooksAndFeelGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
      <label><html:h2 data-l10n-id="zen-look-and-feel-colors-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-colors-description" />

      <hbox id="zenLooksAndFeelColorOptions" align="center">
      </hbox>

      <html:div id="zen-theme-builder-wrapper"></html:div>

      <checkbox id="zenLooksAndFeelUseThemedToolbar"
            data-l10n-id="zen-look-and-feel-themed-toolbar"
            preference="zen.theme.toolbar-themed"/>

      <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />

      <checkbox id="zenLooksAndFeelShowCompactView"
            data-l10n-id="zen-look-and-feel-compact-view-enabled"
            preference="zen.view.compact"/>
      <vbox class="indent">
            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
                  preference="zen.view.compact.hide-toolbar"/> 
      </vbox>
</groupbox>

<hbox id="zenThemeCategory"
      class="subcategory"
      hidden="true"
      data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-theme-title"/>
</hbox>

<groupbox id="zenThemeGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />

      <checkbox id="zenLooksAndFeelPilledButtons"
            data-l10n-id="zen-look-and-feel-pilled-buttons"
            preference="zen.theme.pill-button"/>

      <label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
</groupbox>

<hbox id="zenSidePanelsCategory"
      class="subcategory"
      hidden="true"
      data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-side-panels-title"/>
</hbox>

<groupbox id="zenSidePanelsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
      <label><html:h2 data-l10n-id="zen-side-panels-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-side-panels-description" />

      <checkbox id="zenLooksAndFeelUseThemedToolbar"
            data-l10n-id="zen-side-panels-enabled"
            preference="zen.sidebar.enabled"/>
      <hbox class="indent">
            <checkbox id="zenLooksAndFeelSidebarCloseOnBlur"
                  data-l10n-id="zen-side-panels-close-on-blur"
                  preference="zen.sidebar.close-on-blur"/>
      </hbox>
</groupbox>

<hbox id="zenVerticalTabsCategory"
      class="subcategory"
      hidden="true"
      data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
</hbox>

<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
      <label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />

      <checkbox id="zenLooksAndFeelShowTabExpandButton"
            data-l10n-id="zen-vertical-tabs-show-expand-button"
            preference="zen.view.sidebar-expanded.show-button"/>

      <label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />
      <form xmlns="http://www.w3.org/1999/xhtml" id="zen-expand-tabbar-strat" autocomplete="off" class="indent">
            <hbox>
                  <input type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
                  <span data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
            </hbox>
            <hbox>
                  <input type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
                  <span data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
            </hbox>
            <hbox>
                  <input type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
                  <span data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
            </hbox>
      </form>
</groupbox>

</html:template>
